<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1{
    height: 400px;
    background-color: lightblue;
}
.box2{
    height: 400px;
    background-color: lightgreen;
}
.box3{
    height: 400px;
    background-color: lightpink;
}
</style>
</head>
<body>
    
<div class="box1">看是否可见傻逼一看就明白吧</div>
<div class="box2"></div>
<div class="box3"></div>

<script>

// 事件目标：触发事件的具体元素

// 事件对象常用属性：

 document.onclick = function (e){
    // clientX/clientY 事件触发时返回鼠标指针的坐标（可视区中的坐标）
    console.log( e.clientX, e.clientY );

    // pageX/pageY 事件触发时返回鼠标指针的坐标（在整个页面中的坐标）
    console.log( e.pageX, e.pageY );

    // offsetX/offsetY 事件触发时返回鼠标指针的坐标（在事件目标中的坐标）
    console.log( e.offsetX, e.offsetY );
} 

/* document.onmousedown = function (e){
    // button 事件触发时返回鼠标的按键码
    // console.log( e.button );// 0左  1中  2右

    // which 事件触发时返回鼠标的按键码（也能返回键盘按键码）
    console.log( e.which );// 1左  2中  3右
} */


// document.onkeydown = function (e){
//     console.log( e );

//     // 获取键盘按键码（ASCII码）
//     // console.log( e.which );
//     // console.log( e.keyCode );

//     // 兼容多浏览器的写法
//     var ascii = e.which || e.keyCode;
//     console.log( ascii );

    // 如何判断组合键？ ctrl + c  alt + a  shift + d
    // 组合键 ctrl alt shift 不能使用按键码来判断
    // 使用 ctrlKey  altKey  shiftKey  metaKey 来判断
    if (e.ctrlKey && ascii === 67) {
        alert('亲，开通VIP享受更多服务！');
    }
// }

</script>
</body>
</html>